<template>
    <div class="art-full-height">
        <ElCard class="art-table-card" shadow="never" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
            <div class="header">
                用户列表
            </div>
            <!-- <el-form :model="searchForm" ref="searchFormRef" label-width="auto" style="padding-bottom: 1.5rem">
                <el-row :gutter="24">
                    <el-col :span="6">
                        <el-form-item label="状态：" prop="status">
                            <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
                                <el-option v-for="item in statusList" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form> -->
            <ArtTable :data="tableData" selection :loading="tableLoading" :currentPage="pageNum" :pageSize="pageSize"
                :total="pageTotal" @current-change="currentChange" @size-change="sizeChange">
                <template #default>
                    <el-table-column label="用户信息" prop="nickname">
                        <template #default="scope">
                            <div style="display: flex; align-items: center">
                                <img class="avatar" :src="scope.row.avatar" alt="avatar" />
                                <div>
                                    <div class="user-name">{{ scope.row.nickname }}</div>
                                    <div class="user-name" v-if="scope.row.userId">ID：{{ scope.row.userId }}</div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="手机号" prop="username" align="center" />
                    <el-table-column label="注册时间" prop="createTime" align="center" />
                    <el-table-column label="驾校数量" prop="storeCount" align="center" />
                    <el-table-column label="支付金额" prop="consumeAmount" align="center" #default="scope">
                        {{ scope.row.consumeAmount ? (Number(scope.row.consumeAmount) /
                            100).toFixed(2) : '0' }}
                    </el-table-column>
                    <el-table-column label="佣金金额" prop="brokerageAmount" align="center" #default="scope">
                        {{ scope.row.brokerageAmount ? (Number(scope.row.brokerageAmount) /
                            100).toFixed(2) : '0' }}
                    </el-table-column>
                </template>
            </ArtTable>
        </ElCard>
    </div>
</template>
<script lang="ts" setup>
import { FormInstance } from 'element-plus'
import { getInviterList } from '@/api/agent'

const searchForm = reactive({
    status: ''
})
const showSearchBar = ref(false)
const statusList: any = []
const searchFormRef = ref<FormInstance>()
const tableLoading = ref(false)
const pageNum = ref(1)
const pageSize = ref(10)
const pageTotal = ref(0)
const tableData = ref([])

const getData = async () => {
    try {
        tableLoading.value = true
        const res = await getInviterList({
            pageNum: pageNum.value,
            pageSize: pageSize.value
        })
        if (res.code === '0') {
            tableData.value = res.data.list
            pageTotal.value = res.data.total
        }
    } catch { } finally {
        tableLoading.value = false
    }
}

const currentChange = (val: number) => {
    pageNum.value = val
    getData()
}

const sizeChange = (val: number) => {
    pageSize.value = val
    pageNum.value = 1
    getData()
}

onMounted(() => {
    getData()
})
</script>
<style lang="scss" scoped>
.header {
    margin-bottom: 20px;
    font-size: 25px;
}

.avatar {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    margin-right: 5px;
}
</style>